/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <!-- <m-list-construction :title="$t('Project')"> -->
  <div v-loading="isLoading">
    <h4 class="mar-tb-20">项目管理</h4>
    <div class="mar-b-10">
      <el-row>
        <el-col class="lh-28" :span="12">
          <span class="cur-p mar-r-5">全部项目</span>
          <span class="cur-p mar-r-5 text-primary">只看关注</span>
          <el-divider direction="vertical"></el-divider>
          <span class="cur-p mar-r-5 text-primary">创建时间<i class="el-icon-sort-down"></i></span>
          <el-divider direction="vertical"></el-divider>
          <span class="mar-r-15">共{{total}}个</span>
          <span class="mar-r-5">
            <span class="project-list-item-state bg-success mar-r-5"></span>运行中(0)
          </span>
          <span class="mar-r-5">
            <span class="project-list-item-state mar-r-5"></span>已关闭(0)
          </span>
        </el-col>
        <el-col class="text-right" :span="12">
          <div class="dis-ib w-250">
            <el-input @keyup.enter.native="_onConditions" size="mini" placeholder="请输入项目名称" suffix-icon="el-icon-search" v-model="searchParams.searchVal">
              <!-- <el-button slot="append" @click="_onConditions()" icon="el-icon-search"></el-button> -->
            </el-input>
          </div>
          <div class="dis-ib mar-l-20">
            <el-button size="mini" icon="el-icon-plus" @click="_create(null)" type="primary">{{ $t('Create Project') }}</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <template>
      <m-conditions @on-conditions="_onConditions">
        <template slot="button-group">
          <el-button size="mini" @click="_create(null)">{{ $t('Create Project') }}</el-button>
        </template>
      </m-conditions>
    </template> -->
    <template>
      <template v-if="projectsList.length || total>0">
        <!-- <m-list :projects-list="projectsList" @on-update="_onUpdate" :page-no="searchParams.pageNo"
                :page-size="searchParams.pageSize"></m-list> -->
        <div>
          <el-row :gutter="15">
            <el-col class="mar-b-15 cur-p" :span="6" v-for="(item , index ) of projectsList" :key="index">
              <el-card @click.native="_switchProjects(item)" class="project-list-item" shadow="hover">
                <div>
                  <span class="project-list-item-state" :class="{'bg-success': index < 2}"></span><span>{{item.name}}</span>
                  <div class="pull-right">
                    <i class="el-icon-star-off"></i>
                  </div>
                </div>
                <div class="pad-tb-20 fts-12 text-black-3">
                  <span>长期项目</span>
                  <span class="pull-right"><i class="el-icon-refresh"></i> 3天前</span>
                </div>
                <div class="mar-t-20">
                  <el-row :gutter="15">
                    <el-col :span="8" class="text-center">
                      <div class="fts-18">12亿</div>
                      <el-divider></el-divider>
                      <div class="fts-12 text-black-2">数据量(条)</div>
                    </el-col>
                    <el-col :span="8" class="text-center">
                      <div class="fts-18">3</div>
                      <el-divider></el-divider>
                      <div class="fts-12 text-black-2">资源目录(个)</div>
                    </el-col>
                    <el-col :span="8" class="text-center">
                      <div class="fts-18">3</div>
                      <el-divider></el-divider>
                      <div class="fts-12 text-black-2">任务(个)</div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <!-- <div class="page-box">
          <el-pagination
            background
            @current-change="_page"
            @size-change="_pageSize"
            :page-size="searchParams.pageSize"
            :current-page.sync="searchParams.pageNo"
            :page-sizes="[10, 30, 50]"
            layout="sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div> -->
      </template>
      <template v-if="!projectsList.length && total<=0">
        <no-data></no-data>
      </template>
    </template>
    <el-dialog append-to-body
      :title="item ? $t('Edit') : $t('Create Project')"
      v-if="createProjectDialog"
      :visible.sync="createProjectDialog"
      width="auto">
      <m-create-project :item="item" @_onUpdate="_onUpdate" @close="_close"></m-create-project>
    </el-dialog>
  </div>
  <!-- </m-list-construction> -->
</template>
<script>
  import * as _ from 'lodash'
  import { mapActions , mapMutations} from 'vuex'
  // import mList from './_source/list'
  import localStore from '@/util/dolphin-scheduler/localStorage'
  // import mSpin from '@/view-module/dolphin-scheduler/common/components/spin/spin'
  import mCreateProject from './_source/createProject'
  // import mNoData from '@/view-module/dolphin-scheduler/common/components/noData/noData'
  import listUrlParamHandle from '@/mixins/listUrlParamHandle'
  // import mConditions from '@/view-module/dolphin-scheduler/common/components/conditions/conditions'
  // import mListConstruction from '@/view-module/dolphin-scheduler/common/components/listConstruction/listConstruction'

  export default {
    name: 'projects-list',
    data () {
      return {
        total: null,
        projectsList: [],
        isLoading: true,
        searchParams: {
          pageSize: 10000,
          pageNo: 1,
          searchVal: ''
        },
        createProjectDialog: false,
        item: {}
      }
    },
    inject: ["indexMain"],
    mixins: [listUrlParamHandle],
    props: {},
    created(){
      this.indexMain.showMenus = false;
      let menu = this.$breadcrumb.get(0);
      this.$breadcrumb.replace(0).data({
        ...menu,
        path: this.$router.currentRoute.path
      }).setShow(false);
      this._getList();
    },
    mounted(){
      this.indexMain.showMenus = false;
      this.$breadcrumb.setShow(false);
    },
    destroyed(){
      // this.indexMain.showMenus = true;
      this.$breadcrumb.setShow(true);
    },
    methods: {
      ...mapActions('projects', ['getProjectsList' , 'deleteProjects']),
      ...mapMutations('dag', ['setProjectName' , 'setProjectId']),
      _switchProjects (item) {
        this.setProjectName(item.name);
        this.setProjectId(item.id);
        this.$breadcrumb.add({
          name: item.name,
          path: '/projects/index',
          meta: {},
          params: item
        });
        localStore.setItem('projectName', `${item.name}`)
        localStore.setItem('projectId', `${item.id}`)
        this.$router.push({ path: '/projects/index' })
      },
      _onConditions () {
        // this.searchParams = _.assign(this.searchParams, o)
        this.searchParams.pageNo = 1;
        this._getList();
      },
      _delete(item){
        this.$confirm(`确定要删除${item.name}？` , `删除项目` , {
          beforeClose: (action , instance , done) => {
            if(action === 'confirm'){
              instance.confirmButtonLoading = true;
              this.deleteProjects({
                projectId: item.id
              }).then(res => {
                instance.confirmButtonLoading = false;
                this.$message.success(res.msg);
                this._onUpdate();
                done();
              }).catch(e => {
                this.$message.error(e.msg || '');
                instance.confirmButtonLoading = false;
                done();
              })
            }else{
              done();
            }
          }
        });
      },
      _page (val) {
        this.searchParams.pageNo = val
      },
      _pageSize (val) {
        this.searchParams.pageSize = val
      },
      _create (item) {
        this.createProjectDialog = true
        this.item = item
      },
      _onUpdate () {
        this.createProjectDialog = false
        this._debounceGET()
      },
      _close () {
        this.createProjectDialog = false
      },
      _getList (flag) {
        this.isLoading = !flag
        this.getProjectsList(this.searchParams).then(res => {
          if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
            this.searchParams.pageNo = this.searchParams.pageNo - 1
          } else {
            this.projectsList = []
            this.projectsList = res.totalList
            this.total = res.total
            this.isLoading = false
          }
        }).catch(e => {
          this.isLoading = false
        })
      }
    },
    watch: {
      // router
      '$route' (a) {
        // url no params get instance list
        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
      }
    },
    components: { mCreateProject}
  }
</script>
<style lang="scss" scoped>
.project-list-item-state{
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #C0C4CC;
  border-radius: 50%;
  position: relative;
  top: 2px;
  margin-right: 10px;
}
.project-list-item-state-running{
  background: #67C23A;
}
.project-list-item{
  border-radius: 0 !important;
  .project-list-item-btns{
    display: none;
  }
  &:hover{
    .project-list-item-btns{
      display: block;
    }
  }
}
</style>
